<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>聊天窗口</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <!--360浏览器优先以webkit内核解析-->
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- Morris -->
    <link th:href="@{/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <!--js-->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            socket = new WebSocket("ws://47.97.90.166:8888/websocket");
            //socket = new WebSocket("ws://127.0.0.1:8888/websocket");
            socket.onmessage = function (event) {
                var str = String(event.data).split("#");
                //console.log(str);r
                var html =
                    '<div class="chat-message">' +
                    '<div class="message">' +
                    '<a class="message-author"> ' + str[1] + '</a>' +
                    '<span class="message-date"> ' + str[0] + '</span>' +
                    '<span class="message-content">' + str[2] + '</span>' +
                    '</div>' +
                    '</div>';
                $("#chat").append(html);
            };
            socket.onopen = function (event) {

            };
            socket.onclose = function (event) {
                alert('连接已断开');
            };
        } else {
            alert("你的浏览器不支持 WebSocket！\n");
        }
        function getdate() {
            var now = new Date(),
                y = now.getFullYear(),
                m = now.getMonth() + 1,
                d = now.getDate();
            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        }
        function send() {
            if($.trim($("#text1").val()) == null || $.trim($("#text1").val()) == '') {
                alert("消息不能为空");
                return;
            }
            var str = getdate() + "#";
            if ($.trim($('#name1').val()) != null && $.trim($('#name1').val()) != '')
                str += $.trim($('#name1').val()) + "#" + $.trim($("#text1").val());
            else {
                str += "匿名用户#" + $.trim($("#text1").val());
            }
                socket.send(str);
            var str2 = String(str).split("#");
            var text1 = document.getElementById('text1');
            text1.value = '';
            /*var html =
                '<div class="chat-message">' +
                '<div class="message">' +
                '<a class="message-author"> ' + str2[1] + '</a>' +
                '<span class="message-date"> ' + str2[0] + '</span>' +
                '<span class="message-content">' + str2[2] + '</span>' +
                '</div>' +
                '</div>';
            $("#chat").append(html);*/
        }
        function init() {
            $("#chat").html("");
            $.ajax({
                type: "GET",
                url: "/chat/chatList",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        var d = data[i];
                        var str = String(d).split("#");
                        var html =
                            '<div class="chat-message">' +
                            '<div class="message">' +
                            '<a class="message-author" href="#"> ' + str[1] + '</a>' +
                            '<span class="message-date"> ' + str[0] + '</span>' +
                            '<span class="message-content">' + str[2] + '</span>' +
                            '</div>' +
                            '</div>';
                        $("#chat").append(html);
                    }
                }
            })
        }
    </script>
</head>
<body onload="init()">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox chat-view">
                <div class="ibox-title">聊天窗口</div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-md-9">
                            <div id="chat" class="chat-discussion" style="height: 500px;"></div>
                        </div>
                        <div class="col-md-3">
                            <div class="chat-users" style="height: 500px">
                                <h1 style="text-align: center;color: #0980ff">公告</h1>
                                <h3>
                                    &emsp;&emsp;该聊天室只是一个学生的练习项目, 有很多的问题, 敬请谅解.
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="chat-message-form">
                <div class="form-group">
                    <input type="text" id="name1" class="form-control" placeholder="输入姓名"/>
                    <textarea class="form-control message-input" id="text1" name="message"
                              placeholder="输入消息内容"></textarea>
                </div>
            </div>
            <button class="btn btn-primary btn-sm" onclick="send()">发送</button>
        </div>
    </div>
</div>
</body>
</html>